<template>
  <div>
    <div class="container-body w">
      <Row :gutter="16">
        <div>
          <Col span="24">
            <Card style="border-radius:0;border:none;">
              <div class="recruittop">
                <div class="top-l">
                  <img :src="rinfo.resumeavatar" alt />
                </div>
                <div class="top-r">
                  <h3 class="title">{{rinfo.name}}</h3>
                  <div class="minfo">
                    <span class="salary">1000-2500</span>
                    <span>{{rinfo.birthyearsindex}}岁</span>
                    <span>{{dbase.resumedegrees[rinfo.resumedegreesindex]}}</span>
                    <span>{{dbase.resumeexperiences[rinfo.resumeexperiencesindex]}}</span>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <!-- 拨打电话 -->
                <button
                  class="btn call"
                  @click="connact"
                  v-if="vipfree || appinfo.tops.chakanfee == 0"
                >免费拨打电话</button>
                <button class="btn call" @click="connact" v-else>拨打电话 ¥{{appinfo.tops.chakanfee}}</button>
              </div>
            </Card>
          </Col>
        </div>
      </Row>
    </div>
    <div class="container-body w" style="background: #f1f1f1;">
      <Row type="flex" justify="space-between" class="code-row-bg">
        <Col span="24" style="background: #fff;">
          <Card style="border-radius:0;border:none;">
            <div class="rdetail">
              <h3 class="title">求职意向:</h3>
              <span class="grayline"></span>
              <div class="wel">
                <span v-for="(wel,index) in rinfo.chosewelfare" :key="index">{{wel}}</span>
              </div>
              <h3 class="title">基本资料</h3>
              <span class="grayline"></span>
              <div>{{rinfo.des}}</div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
    <!-- 弹窗 -->
    <div class="sys-tips" v-show="tipsshow">
      <div class="inner">
        <div class="status">
          <div class="status-img">
            <img :src="statusimg" />
          </div>
        </div>
        <div class="bd">
          <div class="text1 ellips1">{{text1}}</div>
          <div class="text2 ellips2">{{text2}}</div>
          <div class="btn-group">
            <div class="sbtn" @click="tipstoggle">{{suretext}}</div>
          </div>
        </div>
        <div class="close">
          <!-- <img src="/static/images/close.png" mode="" @click="tipstoggle" /> -->
        </div>
      </div>
    </div>
    <!-- 微信支付二维码 -->
    <Modal v-model="modal2" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>请使用微信扫一扫</span>
      </p>
      <div style="    display: flex;">
        <!-- 二维码 -->
        <div id="qrCode" ref="qrCodeDiv" class="qrCode"></div>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rinfo: {},
      dbase: [],

      tipsshow: false,
      text1: "",
      text2: "",
      suretext: "我知道啦",
      statusimg: "",

      seen: false,
      seenresume: [],
      vips: [],
      appinfo: {},
      modal2: false,

      uid: "",
      telnums: "",
      vipfree: false,
      limitstatus: 0
    };
  },
  created() {
    console.log(this.$route.query.rid);
    var that = this,
      rid = that.$route.query.rid;
    that.$http.aget("resumeiteminfo", { rid: rid }).then(res => {
      console.log(res);
      that.rinfo = res;
    });
    that.$axios.get(that.$http.apiurl("mpinfo")).then(res => {
      that.dbase = res.data.dbase;
    });
    that.$axios.get(that.$http.apiurl("ginfo") + "&op=appinfo").then(res => {
      console.log(res.data);
      that.appinfo = res.data;
    });

    if (!localStorage.getItem("user_info")) {
      console.log(localStorage.getItem("user_info"));
      that.$Message.error("未登陆,请登陆!");
      that.$router.push({ name: "login", query: {} });
    } else {
      that.uid = JSON.parse(localStorage.getItem("user_info")).id;
      that.telnums = JSON.parse(localStorage.getItem("user_info")).telnum;
    }

    that.checkvip(), that.checklimit();
  },
  methods: {
    SQRCode: function() {
      document.getElementById("qrCode").innerHTML = "";
      // window.location.protocol+"//"+window.location.host
      var qrurl =
        "https://open.ls11.cn/app/index.php?i=52&c=entry&do=pcpay&m=lshd_zhaopinhign&telnum=" +
        this.telnums +
        "&fee=" +
        this.$store.getters.gappinfo.tops.fabufee;
      console.log(qrurl);
      new this.$qrcode(this.$refs.qrCodeDiv, {
        text: qrurl,
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: this.$qrcode.CorrectLevel.L //容错率，L/M/H
      });
    },
    // 查询是否有VIP
    checkvip() {
      var that = this;
      console.log(that.uid);
      that.$http.apost("svip", { op: "vipinfo", uid: that.uid }).then(res => {
        console.log(res);
        that.vips = res;
        if (res.znum > 0) {
          that.vipfree = true;
        }
      });
    },
    // 查询次数
    checklimit() {
      var that = this;
      that.$http
        .apost("limit", {
          uid: that.uid
        })
        .then(res => {
          console.log(res);
          if (res <= that.appinfo.tops.limit) {
            that.limitstatus = 1;
            that.vipfree = true;
          } else {
            that.limitstatus = 0;
          }
        });
    },
    connact() {
      var that = this;
      const value = localStorage.getItem("seenresume");
      console.log(value);
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (value[i] == that.rinfo.id) {
            that.seen = true;
          }
        }
        that.seenresume = value;
      } else {
        that.seenresume = [];
      }
      if (!that.seen) {
        if (!localStorage.getItem("user_info")) {
          that.$Message.error("未登陆,请登陆!");
          that.$router.push({ name: "login", query: {} });
        } else {
          if (that.vips.jnum > 0) {
            // 减掉hcard招聘数jnum
            that.$http
              .aget("cardnum", {
                op: "jnum",
                uid: localStorage.getItem("user_info").id
              })
              .then(res => {
                console.log("VIP"), (that.tipsshow = true);
                (that.text1 = this.telnums),
                  (that.text2 =
                    "您是VIP用户,本次可免费查看该联系方式,手机输入上方号码即可拨打电话"),
                  (that.suretext = "我知道啦"),
                  (that.tipsmode = 1),
                  that.seenresume.push(that.rinfo.id);
                localStorage.setItem("seenresume", that.seenresume);
              });
          } else if (that.appinfo.tops.chakanfee == 0) {
            console.log("fabufee == 0");
            that.tipsshow = true;
            that.text1 = "免费查看简历电话";
            that.text2 = "手机输入上方号码即可拨打电话";
            that.suretext = "我知道啦";
            that.tipsmode = 1;
          } else if (that.appinfo.tops.chakanfee > 0) {
            // 微信支付
            that.$Message.error("微信支付!");
            that.modal2 = true;
            that.getPayResult();
          }
        }
      } else {
        console.log("看过");
        that.tipsshow = true;
        (that.text1 = that.telnums),
          (that.text2 = "手机输入上方号码即可拨打电话"),
          (that.suretext = "我知道啦"),
          (that.tipsmode = 1),
          (that.statusimg = "/static/images/status-jianli.jpg");
      }
    },
    getPayResult(full) {
      var that = this;
      this.$http
        .aget("ginfo&op=getpcpay&telnum=" + this.telnums)
        .then(payre => {
          console.log(payre);
          if (payre) {
            // 支付成功 支付弹框消失
            this.modal2 = false;
            // 提示弹窗出现
            that.text1 = that.telnums;
            that.text2 = "手机输入上方号码即可拨打电话";
            that.suretext = "我知道啦";
            that.tipsmode = 1;
            that.statusimg = "/static/images/status-jianli.jpg";
            that.seenresume.push(that.rinfo.id);
            localStorage.setItem("seenresume", that.seenresume);
          } else {
            setTimeout(function() {
              that.getPayResult(full);
            }, 1000);
          }
        });
    },
    tipstoggle() {
      this.tipsshow = false;
    }
  },
  mounted() {
    console.log("mounted");
    this.SQRCode();
    this.chakanfee = this.$store.getters.gappinfo.tops.chakanfee;
  }
};
</script>
<style lang="scss" scoped>
body {
  background-color: #f1f1f1;

  .container-body {
    background-color: #fff;
    margin: 30px auto;
    padding-bottom: 0;
  }

  .recruittop {
    text-align: left !important;
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .top-l {
      width: 70px;
      height: 70px;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .title {
      font-size: 24px;
    }

    .minfo {
      color: #999;
      font-size: 15px;
      line-height: 28px;

      .salary {
        font-size: 20px;
        font-weight: 600;
        color: red;
      }
    }

    .bottom {
      display: flex;

      .btn {
        width: 210px;
        height: 50px;
        border-radius: 5px;
        font-size: 22px;
        text-align: center;
        line-height: 50px;
      }

      .call {
        background-color: blue;
        color: #fff;
      }

      .postjl {
        background-color: red;
        color: #fff;
        margin-left: 20px;
      }
    }
  }
}

.rdetail {
  text-align: left !important;
}
.wel {
  margin: 10px 0 20px;
  color: #999;

  span {
    display: inline-block;
    height: 26px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 26px;
    color: #999;
    border: 1px solid #f0f0f0;
    border-radius: 3px;
    text-align: center;
    margin-right: 5px;
  }
}
</style>

